<template>
    <div class="content">
        <div class="w">
            <t-header></t-header>

            <div class="mv-content" v-if="mvInfo != null">
                <div class="some-video" v-if="someVideo.length > 0">
                    <div class="title">相关推荐</div>
                    <div
                    :key="index"
                    v-for="(item, index) in 3"
                    @click="jumpPrivese(someVideo[index])"
                    class="some-item">
                        <img :src="someVideo[index].coverUrl">
                        <div>{{someVideo[index].title}}</div>
                        <div class="userName">{{someVideo[index].creator[0].userName}}</div>
                    </div>
                </div>
                <div class="video">
                    <video class="videomv" controls :src="mvUrl"></video>
                </div>
                <div class="mv-name">
                    {{mvInfo.name}}
                </div>
                <div class="user">
                    {{mvInfo.artistName}}
                </div>
                
                <div class="mv-number">
                    {{mvInfo.playCount}}次播放
                </div>
                
            </div>

        </div>


        <t-footer ref="footer"></t-footer>
    </div>
</template>

<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
export default {
    components: {
        't-header': Header,
        't-footer': Footer
    },
    data() {
        return {
            // mv播放地址
            mvUrl: '',
            // mv信息
            mvInfo: null,
            // 视频DOM
            videoDOM: null,
            // 相关视频
            someVideo: [],
            // 当前视频ID:
            videoID: 10929517

        }
    },
    mounted() {
        this.videoID = this.$route.params.id;
        this.getMvData();
        this.getMvUrl();
        this.getSomeMV();
        
        this.$nextTick(() => {
            setTimeout(() => {
                this.getWatchPlay();
            }, 1000)
        })
        
    },
    beforeDestroy() {
        this.videoDOM.removeEventListener('play', this.watchPlayFunction);
    },
    methods: {
        // 获取MV数据
        async getMvData() {
            let { data: res } = await this.$http.get('/mv/detail', { params: { mvid: this.videoID } });
            this.mvInfo = res.data;
        },
        // 获取MV播放地址
        async getMvUrl() {
            let { data: res } = await this.$http.get('/mv/url', { params: { id: this.videoID } });
            this.mvUrl = res.data.url;
        },
        // 相关视频
        async getSomeMV() {
            let { data: res } = await this.$http.get('/related/allvideo', { params: { id: this.videoID } });
            this.someVideo = res.data;
        },
        // 监听播放
        getWatchPlay() {
            this.videoDOM = document.querySelector('.videomv');
            this.videoDOM.addEventListener('play', this.watchPlayFunction);
        },
        // 监听函数
        watchPlayFunction() {
            // 触发暂停事件
            this.$refs.footer.musicPause();
        },
        // 相关视频详情
        async jumpPrivese(item) {
            if (!item.vid.includes('F')) {
                this.videoID = item.vid;
                this.getMvData();
                this.getMvUrl();
            } else {
                let { data: res } = await this.$http.get('/video/detail', { params: { id: item.vid } });
                this.mvInfo = {
                    name: res.data.title,
                    artistName: res.data.creator.nickname,
                    playCount: res.data.praisedCount
                }

                let { data: url } = await this.$http.get('/video/url',{ params: { id: item.vid } });
                this.mvUrl = url.urls[0].url;
            }
        }
    }
}
</script>

<style lang="less" scoped>
.w {
    width: 1400px;
}
.mv-content {
    position: relative;
    padding: 50px;
    min-height: 1000px;
}
.video {
    width: 918px;
    height: 512px;
    video {
        width: 100%;
        height: 100%;
        object-fit: fill;
        outline: none;
    }
}

.user {
    color: #4a4a4a;
    font-size: 16px;
    margin: 10px 0;
}

.mv-name {
    font-size: 22px;
    font-weight: 700;
    color: #4a4a4a;
    margin-top: 20px;
}

.mv-number {
    color: #4a4a4a;
    font-size: 14px;
}

.some-video {
    width: 300px;
    position: absolute;
    right: 100px;
    .title {
        font-size: 16px;
        font-weight: 700;
        color: #4a4a4a;
        margin-bottom: 20px;
    }
    .some-item {
        width: 100%;
        margin-bottom: 20px;
        cursor: pointer;
        img {
            width: 100%;
            margin-bottom: 10px;
        }
        div {
            color: #4a4a4a;
        }
        .userName {
            margin-top: 6px;
        }
    }
}
</style>